import 'package:pacsun/theme/app_colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';

class Community extends StatelessWidget {
  const Community({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 50).r,
      color: Color(0XFF06041b),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              CommunityItme(
                icon: 'assets/icons/icon_conversations.svg',
                text: 'Real Conversations',
              ),
              CommunityItme(
                icon: 'assets/icons/icon_people.svg',
                text: 'Find Your People',
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              CommunityItme(
                  icon: 'assets/icons/icon_way.svg',
                  text: 'Grow Your Way',
                  top: 31),
              CommunityItme(
                  icon: 'assets/icons/icon_other.svg',
                  text: 'Support Each Other',
                  top: 31)
            ],
          ),
          SizedBox(height: 29.h),
        ],
      ),
    );
  }
}

class CommunityItme extends StatelessWidget {
  final String icon;
  final String text;
  final double top;
  const CommunityItme(
      {super.key, required this.icon, required this.text, this.top = 0});

  @override
  Widget build(BuildContext context) {
    final String firstText = text.split(' ').first;
    final String lastText = text.replaceFirst(firstText, '');
    return Container(
      width: 112.w,
      margin: EdgeInsets.only(top: top).r,
      child: Column(
        children: [
          Container(
            width: 50.w,
            height: 50.h,
            margin: EdgeInsets.only(bottom: 6).r,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Color(0XFF312f41),
              borderRadius: BorderRadius.circular(25).r,
            ),
            child: SvgPicture.asset(
              icon,
              width: 30.w,
              height: 30.h,
            ),
          ),
          Text(
            firstText,
            style: customTextStyle(fontSize: 14, height: 22 / 14),
            textAlign: TextAlign.center,
          ),
          Text(
            lastText,
            style: customTextStyle(fontSize: 14, height: 22 / 14),
            textAlign: TextAlign.center,
          )
        ],
      ),
    );
  }
}
